<template>
    <div>
        <div class="container">
            <el-main>
                <el-form :model="hotNewsForm" :label-width="formLabelWidth">
                <el-transfer 
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入城市拼音"
                    v-model="rightValue" 
                    :props="{ key: 'value', label: 'label' }"
                    :titles="titles"
                    :data="leftValue"
                    @change="handleChange">
                </el-transfer>
                </el-form>
            </el-main>
			<el-footer>
                <el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
                <el-button type="success" @click="func_onReset" plain>重置表单</el-button>
                <el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findNewsList, } from "../../../../api/hairmanager/news";
import { getHotNews, getHotCatalog, bundHotNews } from "../../../../api/hairmanager/newsCatalog";
import { SUCCESS_BUNDDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "hotNewsForm",
	props:{
        selectValue: Object,
	},
    emits: ["hotNewsData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");

		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {

            }
        };
        /**
         * @name 表单初始化
         */
        const resetHotNewsForm = () => {
            Object.assign(hotNewsForm, getInitFormData());
        };
		// 新闻资讯表单数据
        let hotNewsForm = reactive(getInitFormData());
        let hotCatalog = reactive({
            id: 0,
            catalogName: '',
        });
        let leftValue = ref([]);
        let rightValue= ref([]);
        let titles = ref([]);
        // =========================================================================================
        const handleChange = (value, direction, movedKeys) => {
            // console.log(value, direction, movedKeys);
             //可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边
             if(direction === "right") {
                // console.log('right movedKeys', movedKeys);
                rightValue.value = movedKeys;
             }
             if(direction === "left") {
                // console.log('left movedKeys', movedKeys);
                movedKeys.forEach((item) => {
                    rightValue.value.splice(movedKeys);
                });
             }
        }
        const filterMethod = (query, item) => {
            return item['label'].indexOf(query) > -1;
        }
        // 提交
        const func_onSubmit = () => {
            let obj = {ids: rightValue.value, catalogId: hotCatalog['id']};
            // 表单校验
            bundHotNews(obj).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.message);
                    } else {
                        ElMessage.error(res.message);
                    }
                } else {
                    ElMessage.success(SUCCESS_BUNDDATA_DIALOG_MESSAGE);
                }
            });
            cex.emit('hotNewsData', {state: 1, data: []});
        };
        // 重置
        const func_onReset = () => {
            resetHotNewsForm();
        };
        const func_closeDialog = () => {
            cex.emit('hotNewsData', {state: 1, data: []});
        };
        const func_onload = () => {
            getHotCatalog().then((res) => {
                hotCatalog['catalogName'] = res.data['catalogName'];
                hotCatalog['id'] = res.data['id'];
                titles.value.push('未关联');
                titles.value.push('已关联 ' + hotCatalog['catalogName']);
            });
            getHotNews().then((res) => {
                leftValue.value = res.data['leftValue'];
                // rightValue.value = res.data['rightValue'];
                console.log("rightValue",res.data['rightValue']);
                let keys = [];
                res.data['rightValue'].forEach((keyObj) => {
                    console.log("keyObj",keyObj);
                    keys.push(keyObj['value']);
                });
                rightValue.value = keys;
            });
        };
        func_onload();
        // =========================================================================================
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
			if(val['load']){
                resetHotNewsForm();
			} else {
                resetHotNewsForm();
            }
        },{deep: true,immediate: true});
        return {
			// 系统变量
            formLabelWidth, hotNewsForm, 
			// 主业务调用方法
            getInitFormData, resetHotNewsForm, func_onSubmit, func_onReset, func_closeDialog,
            hotCatalog, titles, rightValue, leftValue, handleChange, filterMethod,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 180px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>